<template>
  <div style="display: flex;">
    <div style="width: 40%;">
      <table border="0">
        <tr><td style="width: 80px;height: 30px;">交易账户</td></tr>
        <tr>
          <td style="width: 80px;height: 30px;">入金金额</td>
          <td>
            <input style="width: 80px;border: 1px solid;" type="number" v-model="fee" />
            美元≈
            <span style="color: red;">{{ Number((fee || 0) * (huilv || 0)).toFixed(2) }}</span>
            人民币
          </td>
        </tr>
        <!-- <tr>
          <td style="width: 80px;height: 30px;">银行卡绑定手机号</td>
          <td>
            <input style="width: 80px;border: 1px solid;" type="number" v-model="phone" />
          </td>
        </tr> -->
        <tr>
          <td style="width: 80px;height: 30px;">币种</td>
          <td>
            <select style="width: 80px;height: 25px;border: 1px solid;">
              <option value="USD">美元</option>
            </select>
          </td>
        </tr>
      </table>

      <button style="padding: 2px 15px;text-align: center;margin-top: 20px;border: 1px solid;" @click="bntlist && recharge()">入金（银行转账户资金）</button>
    </div>
    <div>
      <table border="0">
        <tr><td style="width: 80px;height: 30px;"></td></tr>
        <tr>
          <td style="width: 80px;height: 30px;">出金金额</td>
          <td>
            <input style="width: 80px;border: 1px solid;" type="number" v-model="fee2" />
            美元≈
            <span style="color: red;">{{ Number((fee2 || 0) * (huilv || 0)).toFixed(2) }}</span>
            人民币
          </td>
        </tr>
        <tr>
          <td style="width: 80px;height: 30px;">币种</td>
          <td>
            <select style="width: 80px;height: 25px;border: 1px solid;">
              <option value="USD">美元</option>
            </select>
          </td>
        </tr>
      </table>

      <button style="padding: 2px 15px;text-align: center;margin-top: 20px;border: 1px solid;" @click="bntlist && withdrawal()">出金（账户资金转银行）</button>
    </div>
    <div v-if="showCode" style="margin:0 0 10px 60px;align-item:center;text-align:center;">
      <div style="color: red;margin-bottom:5px"> 扫码支付</div>
      <img style="width: 180px;" :src="payCodeUrl"/>
      <div class="al_btn" @click="showCode = false;fee = '';phone = '';">
        关闭
      </div>
    </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      huilv: 0, //汇率
      alertborder: false /* 提示框 */,
      showCode: false,
      chongzhiurl: '',
      bntlist: true,
      list: '',
      navs: false,
      navs_s: false,
      navs_t: false,
      fee: '',
      phone: '',
      fee2: '',
      payCodeUrl:'',
      form: {
        rale_name: '',
        bank_name: '',
        bank_code: '',
        province: '',
        city: '',
        child_name: ''
      }
    };
  },
  mounted() {
    this.obtain();
  },
  methods: {
    //充值
    recharge() {
      this.bntlist = false;
      let that = this;

      if (this.fee == '') {
        this.bntlist = true;
        return this.$notify.error('请填写金额！');
      } else {
        this.$get('v1/pay-top/charge?form=pc&money=' + this.fee).then(res => {
          if(res.code != 200){
            return that.$notify.error(res.message);
          }
          if(res.data.qrcode){  //  支付二维码图片
            that.bntlist = true;
            that.showCode = true;
            that.payCodeUrl = res.data.qrcode; 
          }
          if(res.data.pay_url){ //  支付链接
            window.open(res.data.pay_url,'_blank');
          }
        });
      }
    },
    // //充值显示页面
    // htmltext(data) {
    //   let dwSafari;
    //   dwSafari = window.open();
    //   // dwSafari.document.open();
    //   let dataObj =
    //     '<form name="MerOrder" id="MerOrder" method="post" action="' +
    //     data.url +
    //     '"><input type="hidden" name="orderNo" value="' +
    //     data.orderNo +
    //     '"/><input type="hidden" name="customerId" value="' +
    //     data.customerId +
    //     '"/><input type="hidden" name="orderCurrency" value="' +
    //     data.orderCurrency +
    //     '"/><input type="hidden" name="orderAmount" value="' +
    //     data.orderAmount +
    //     '"/><input type="hidden" name="receiveUrl" value="' +
    //     data.receiveUrl +
    //     '"/><input type="hidden" name="pickupUrl" value="' +
    //     data.pickupUrl +
    //     '"/><input type="hidden" name="signType" value="MD5"/><input type="hidden" name="sign" value="' +
    //     data.sign +
    //     '"/><input type="hidden" name="crmNo" value="' +
    //     data.crmNo +
    //     '"/></form>';
    //   setTimeout(res => {
    //     dwSafari.document.write("<html><head><title></title><meta charset='utf-8'><body onLoad='document.MerOrder.submit();'>" + dataObj + '</body></html>');
    //     // dwSafari.document.close();
    //   }, 100);
    // },
    //提现
    withdrawal() {
      this.bntlist = false;
      if (this.fee2 == '') {
        this.bntlist = true;
        return this.$notify.error('请填写金额！');
      }
      this.$post('v1/pay-top/withdrawal', { price: this.fee2 }).then(res => {
        this.bntlist = true;
        if (res.code == 200) {
          this.$notify.success(res.message || '出金请求已提交,等待工作人员审核！');
          this.fee = '';
        } else {
          this.$notify.error(res.message || '出金请求失败');
        }
      });
    },
    //获取信息
    obtain() {
      this.$get('addons/tf-futures/member/my-info').then(res => {
        console.log(res.data.hl.close, '资金状态');
        if (res.code == 200) {
          this.huilv = Number(res.data.hl.close);
        } else {
          console.log(res.message || '获取用户资金状态出错 ');
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
#download {
  line-height: 100vh;
  text-align: center;
}
/* alert弹出框 */
.al_border {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #000;
  position: fixed;
  top: 0px;
  left: 0px;
  background: #fff;
  .iframe_border {
    width: 100%;
    height: calc(100vh - 70px);
  }
  
}
.al_btn {
    cursor: pointer;
    margin: 0 auto;
    margin-top: 10px;
    width: 80px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    background: #007f00;
    color: #fff;
  }

.context {
  width: 100%;
  height: calc(100vh - 25px);

  .context-top {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .left-tab {
      width: 25px;
      height: 100%;
      overflow: hidden;

      .btn-tab {
        width: 22px;
        height: 90px;
        margin-left: 3px;
        background-color: #f2f2eb;
        border-bottom-left-radius: 15px;
        border: #4b4b4b solid 1px;
        text-align: center;
        font-size: 12px;
        box-sizing: border-box;
        padding-top: 5px;
        cursor: default;
      }

      .btn-tab:hover {
        background: #333;
        color: #fff;
      }
    }

    .info-list {
      width: calc(100% - 25px);
      background: #000000;
      height: 100%;

      .list-border {
        width: 100%;
        height: calc(100% - 25px);
        overflow: auto;
        background: forestgreen;

        .quotes {
          width: 100%;
          height: 100%;
          min-width: 1500px;
        }
      }

      .quotes_tab {
        width: 100%;
        height: 25px;
        background: palevioletred;
      }
    }
  }

  .context-btn {
    width: 100%;
    height: 5px;
    background: black;
    cursor: move;
  }

  .context-bottom {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    // height: calc(40% - 5px);
    background: goldenrod;
    overflow: hidden;
  }
}
</style>
